<template>
  <div>
    <el-row>
      <el-col :span="1" style="margin: 0px 0px 0px 10% ">
        <img src="../img/shopping.png" width="40" height="40">
      </el-col>
      <h2 style="font-size: 30px;margin: 0px 0px">购物车</h2>
    </el-row>
    <el-divider></el-divider>
    <div class="content" v-if="shoppingcard.length>0">
      <el-row style="margin: 20px 0px 0px 180px;">
        <el-col :span="21" >
          <el-card>
            <el-table ref="multipleTable" :data="shoppingcard" tooltip-effect="dark" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="imghref" label="" >
                <template slot-scope="scope">
                  <img  :src="scope.row.imghref" alt="" style="width: 50px;height: 50px">
                </template>
              </el-table-column>
              <el-table-column prop="goodname" label="商品名称" width="300px">
              </el-table-column>
              <el-table-column prop="" label="" width="200">
              </el-table-column>
              <el-table-column prop="price" label="单价(元)" >
              </el-table-column>
              <el-table-column prop="count" label="数量" width="200px">
                <template slot-scope="scope">
<!--                  <el-input-number v-model="scope.row.count" @change="handleChange" :min="1" :max="10"></el-input-number>-->
                  <button @click="mouse(scope.row)">-</button>
                  {{scope.row.count}}
                  <button @click="add(scope.row)">+</button>
                </template>
              </el-table-column>
              <el-table-column prop="subtotal" label="小计(元)" >
              </el-table-column>
              <el-table-column label="操作" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button plain icon="el-icon-delete" @click="del(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
          <br>
          <el-card style="padding: 0px">
            <el-row>
              <el-col :span="2">
                <el-button class="button" @click="delBatch">清空商品</el-button>
              </el-col>
              <el-col :span="3">
                <p style="margin: 7px 0px 0px 20px;">共{{ this.shoppingcard.length }}件商品</p>
              </el-col>
              <el-col :span="4" :offset="10">
                <el-button type="primary" class="button" @click="sum">合计</el-button>
                <div v-if="total">
                  <p style="margin: 3px 0px 0px 255px ;font-size: 25px ;color: red">￥{{total}}</p>
                  <el-button type="danger" style="margin: -38px -300px " class="button" @click="allbuy">去结算</el-button>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-else class="cart-empty">
      <el-empty description=" " >
        <h2>购物车空空如也，快去逛逛吧</h2>
      </el-empty>
    </div>

  </div>

</template>

<script>
import shoppingcardApi from "@/http/shoppingcardApi";

export default {
  name: "Shopping",
  created() {
    //当vue实例创建成功时
    this.getList();
  },
  data(){
    return{
      shoppingcard:[],
      batchIds: [],
      total: ''
    }
  },
  methods:{
    getList(){
      shoppingcardApi.getListByPage().then(res =>{
        console.log(res);
        if (res.data.code == 200){
          // this.pager = res.data.data
          this.shoppingcard = res.data.data.data
        }
      })
    },
    handleChange(){

    },
    handleSelectionChange(val){
      console.log(val);
      this.batchIds = [];
      this.selectgoods = [];
      val.forEach(shoppingcard => this.batchIds.push(shoppingcard.id));
      val.forEach(shoppingcard => this.selectgoods.push(shoppingcard.id));
      console.log("selectgoods传的值等于:"+this.selectgoods);
    },
    add(row){
        shoppingcardApi.add(row.id).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        })
    },
    mouse(row){
      shoppingcardApi.mouse(row.id).then(res => {
        if (res.data.code == 200){
          this.$message.success(res.data.msg);
          this.getList();
        }
      })
    },
    del(row){
      console.log(row);
      let result = confirm("确认删除该记录吗");
      if (result){
        shoppingcardApi.del(row.id).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        })
      }
    },
    delBatch(){
      if (this.batchIds.length == 0){
        this.$message.warning("请勾选要删除的数据！")
        return;
      }
      let result = confirm("确认删除选中记录吗");
      if (result){
        shoppingcardApi.delBatch(this.batchIds).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
          }
        })
      }
    },
    sum(){
      if (this.batchIds.length == 0){
        this.$message.warning("您还没有选择商品哦")
        return;
      }else{
        shoppingcardApi.sum(this.batchIds).then(res => {
          if (res.data.code == 200){
            this.getList();
            this.total = res.data.data[0].sum
            this.count = res.data.data[0].count
            this.$store.dispatch('GET_SELECTGOODS_ACTIONS',this.selectgoods);
            this.$store.commit("SET_TOTAL",this.total);
            this.$store.commit("SET_COUNT",this.count);
            this.$store.commit("SET_IDS",this.selectgoods);
          }
        })
      }
    },
    allbuy(){
      this.$router.replace("/allBuy.html")
    }
  }
}
</script>

<style>
</style>